<template>
<div>
<input type="checkbox" v-model="completed" @change="toggleCompletion">
<span :style="{textDecoration: completed ? 'line-through' : 'none'}">{{ title }}</span>
<button @click="removeTodo">删除</button>
</div>
</template>

<script>
export default {
props: {
title: String,
completed: Boolean
},
methods: {
toggleCompletion() {
this.$emit('update:completed', !this.completed);
},
removeTodo() {
this.$emit('remove-todo');
}
}
}
</script>